<template>
	<view>
		<uni-nav-bar style="width: 100%;" left-icon="back" title="闪兑" @clickLeft="clickLeft"></uni-nav-bar>
		
		<recording :list="list">
			<view class="flex">
				<view class="LiFilter">HNW</view>
				<view class="cmd-img"><image src="../../static/image/icon/jiantou.png" mode=""></image></view>
				<view class="LiFilter">USDT</view>
			</view>
		</recording>
		<view class="cmd-btn"><button @tap="confirm">确认</button></view>
		<payment v-if="paymentShow" @payment="payment"></payment>
	</view>
</template>

<script>
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
import xflSelect from '../../components/xfl-select/xfl-select.vue';
import recording from '../component/recording.vue';
import payment from '../../components/payment/payment';

export default {
	components: { uniNavBar, xflSelect, payment, recording },
	data() {
		return {
			paymentShow: false,
			list: [{ name: '消耗', num: '122' }, { name: '得到', num: '6354USDT' }, { name: '当前汇率', num: '1HNW=4.23USDT' }, { name: '手续费', num: '0.2%' }]
		};
	},
	methods: {
		clickLeft() {
			uni.redirectTo({
				url: 'exchange'
			});
		},
		confirm() {
			this.paymentShow = true;
		},
		payment(data) {
			this.paymentShow = false;
			uni.navigateTo({
				url: 'exchange2'
			});
		}
	}
};
</script>

<style lang="scss">

.LiFilter {
	width: 232rpx;
	color: #666666;
	font-size: 48rpx;
	text-align: center !important;
}
.cmd-img {
	width: 74rpx;
	height: 16rpx;
	line-height: 16rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
.cmd-btn {
	margin: 0 66rpx;
	margin-top: 150rpx;
	button {
		color: #ffffff;
		background-color: #2b9f93;
	}
}
</style>
